Copyright: (c) 2001 Elibrium. All Rights Reserved.
Citation: Creative Animator Help (c) 2001 Elibrium. All Rights Reserved.


Getting Started

Creative Animator allows you to design professional-looking animated graphics and banners for your Web pages. The text and image tools in Creative Animator give you complete flexibility and control over the results.

We suggest reading the rest of this chapter to get an overview of the program. There is also online help, so that you can get help at any time while using the program.

See:

Learning the Basics

Using the Toolbar

How to Get Help


Learning the Basics

There are three steps to creating an animated graphic using Creative Animator:

•	Step 1: Designing an Animated Graphic

•	Step 2: Saving your Graphic

•	Step 3: Adding the Graphic to Your Web Page


Step 1: Designing an Animated Graphic

Designing an animated graphic includes creating a design, copying it, and then modifying each of the copies.

See:

Designing a Graphic

Animating the Graphic


Designing a Graphic

When you start Creative Animator, the graphic design window displays. Use the tools at the top of the window to add text, shapes, and images to the design area. Everything that you place in the design area is used to make your graphic.

If you are designing a graphic for a banner, you can save your design.

See also:

Designing a Graphic


Animating the Graphic

After you design your graphic, you will use it as a template for creating a series of frames for your animated graphic. Use the Edit menu to choose one of the duplicate options.

By duplicating the graphic you keep the size and image the same for each frame. You can duplicate the graphic as many times as you wish depending on the amount of animation you want. Once you have made all the duplications, then you can select the image in each frame and modify it.

See also:

Creating an Animated Graphic


Step 2: Saving your Graphic

After you have designed your animated graphic, open the File menu and choose Save As Frames. In the Save As dialog, enter a frame rate and the file name.

To save your graphic as a static graphic, open the File menu and choose Save As.

See also:

Saving Your Animated Graphic File

Saving Your Graphic


Step 3: Adding the Graphic to Your Web Page

After saving your animated graphic, you can insert it into your web page using the tools in a web page editor.

See also:

Inserting Your Animated Graphic Into a Web Page


Using the Toolbar

There are often several ways to perform tasks in Creative Animator. This manual and the online help describe the most straight-forward way to perform a function, but may not describe the fastest way.

The easiest way to speed up your work is to use the toolbars at the top of the Creative Animator window. Most of the instructions in this manual tell you how to perform a task using the menu bar at the top of the window. However, there are toolbar buttons for some features that can save you a few mouse clicks. When available, these buttons are shown in the margin next to the instructions for the task.

Some toolbars only display after you have selected the text or object that you want to edit.


How to Get Help

In addition to this manual, Creative Animator offers online help. For a listing of Help topics, open the Help menu and choose Help Topics.

In addition to the main help file, you can use ToolTips and the Status Bar to get tips or hints without opening the Help window.

See:

Using Tool Tips

Using the Status Bar


Using Tool Tips

In addition to detailed online help, Creative Animator also features Tool Tips. With Tool Tips turned on, use the mouse to point to a button on the screen. A box containing a brief explanation opens next to the cursor.

To turn the tips on or off, open the Help menu and choose Tool Tips.


Using the Status Bar

The status bar at the bottom of the Creative Animator window displays descriptions of menu items and buttons.

Point the cursor at a button in the toolbar or highlight a menu item, and the status bar will display a line of information about the tool or option. For example, if you open the View menu and highlight the Grid option, the following message displays:

The status bar also displays information about the graphic size and position on the screen.

To turn the Status Bar on or off, open the View menu and either mark or clear the Status Bar option.


Designing a Graphic

Using Creative Animator you can create a static graphic that can be used in an animated graphic.

Creative Animator allows you to draw shapes, lines, and add text to an image you create. This chapter describes how to design a graphic using Creative Animator.

See:

Creating a New Graphic

Drawing Shapes

Drawing Lines

Saving Your Graphic

Creating a Banner


Creating a New Graphic

Every time you start Creative Animator, the program automatically creates a new graphic file. If you want to start a new graphic while the program is running, open the File menu and choose New. The current graphic file closes and a new graphic file is created. If you have not saved and named the current file, you are asked to do so.

If you want to edit an existing graphic, see Editing Your Graphic.


Overview of Drawing Shapes

You can draw shapes such as rectangles, circles, or ellipses to design the foundation of your graphic.

1.	Click the Shapes button.

2.	Position the cursor in the design area, then click to place the shape.

3.	Use the resizing handles to adjust the size of the shape.

To select a shape, click anywhere within its border. After selecting it, you can move it by clicking anywhere within the shape and dragging it to its new position. To change its size, click one of the handles and drag it.

See:

Formatting the Shape

Adding Text to Your Graphic


Formatting the Shape

When you select a shape, additional tools display in the bar above the graphic. These tools allow you to change the frame thickness or corner style, the frame color, and the fill color. You can also change a rectangle into a circle, ellipse, or triangle.

See:

Shape Formatting Options


Shape Formatting Options

Attribute	Description
Outline Color	Sets the color and thickness of the selected shape’s border.
Fill Color	Sets the fill color and texture effect (3D or flat) for the selected shape.
Gradient Color Fill	Allows you to choose a gradient of colors and the direction of the fill.
Images	Allows you to select an image to place on your shape. Creative Animator tiles the image into the selected shape .
Corner style	Gives the selected shape either square or rounded corners.
Circle	Changes the selected shape into a circle. Make an ellipse by clicking and dragging a resizing handle.
Triangle	Converts the selected shape into a triangle. Click multiple times to get different triangle effects.


Overview of Adding Text

Click the Text button to enter the text that you want to display on your graphic.

1.	Click the Text button.

2.	Click in the graphic to replace the text box.

3.	Begin typing to enter your information. The text box grows to accommodate the text.

To add more than one line of text, press ENTER.

See:

Formatting Text


Formatting Text

You can change the font, style, size, color, or alignment of your text by using the buttons in the Font Formatting toolbar.

1.	Select the text you want to format to display the Font Formatting toolbar.

2.	Choose the formatting options you want.

See:

Changing the Font and Font Size

Choosing a Font Style

Choosing the Text Alignment

Resizing Text One Point Size at a Time

Expanding or Condensing Text

Rotating Text

Choosing a Text Color


Changing the Font and Font Size

Creative Animator includes many fonts that you can choose for your graphic. The font you choose applies to all of the text in a text box.

To change the font:

1.	Click on a text box to select it.

2.	Click the down arrow in the Font Selection box to display the list of font choices.

3.	Choose a font by clicking on a font name in the list.

Each time the font is changed, it displays in your graphic so you can judge how it looks in your design.

To change the font size:

1.	Click on a text box to select it.

2.	Click the down arrow in the Size Selection box to display the list of choices.

3.	Choose a size by clicking on a number in the list.


Choosing a Font Style

Font styles allow you to achieve a variety of effects with the text in your graphic. You can apply one style, or a combination of styles.

To apply a style, select a text box then click one of the style buttons. To remove a style, click the button again.

Experiment with different font styles until you get the results you want.

After choosing a text style, you can change the text colors using the color buttons at the right end of the toolbar.

Style	Description
Bold	Makes the text in the selected text box bold.
Italic	Makes the text in the selected text box italic.
Underline	Underlines the text in the selected text box.
Outline	Outlines the text in the selected text box. Change the outline color by clicking the Outline Color button (see "Choosing a Text Color" on page 17) .
Frame	Frames the text in the selected text box with the color that you choose (see "Choosing a Text Color" on page 17).
Raised Embossed	Raises the text in the selected text box to simulate embossed letters when the text is placed over a shape or image.
Lowered Embossed	Lowers the text in the selected text box to simulate sunken letters when the text is placed over a shape or image.
Shadow	Places a shadow below the text in the selected text box. You can choose the color of the shadow .
See:

Choosing a Text Color


Choosing the Text Alignment

Set the alignment of your text by clicking one of the text alignment buttons in the Font Formatting toolbar. The text is aligned horizontally within the text box. It can be aligned left, centered, or aligned right.

You can also open the Format menu and choose Justify.


Resizing Text One Point Size at a Time

You can use the Size button to change the point size of text.

1.	Select the text.

2.	Click the up or down arrows in the Size button.

Each click changes the text’s point size in the direction clicked.

You can also hold down the SHIFT key and press the up or down arrow keys on the keyboard to change the text’s point size in the arrow key’s direction.


Expanding or Condensing Text

You can use the Size button to expand or condense the space between the individual letters in your text:

1.	Select the text.

2.	Click the left or right arrows in the Size button.

Each click changes the text's character spacing by one pixel in the direction of the arrow.

You can also hold down the SHIFT key and press the left or right arrow keys on the keyboard to change the character spacing in the arrow key’s direction.


Rotating Text

You can rotate the text in your graphic in 90° increments by clicking the Rotate button. When you click the button, the selected text is rotated 90º counter-clockwise. Click the Rotate button again to rotate the text another 90º. When you edit rotated text or fields, the information is displayed in a dialog for you to edit.

You can also open the Format menu and choose Rotate 90°.

When you click on a rotated text box, text is displayed in the Edit Rotated Text box so you can change it.


Choosing a Text Color

You can choose a color for your text by clicking one of the Color buttons in the Font Formatting toolbar.

When you click on either the Outline Color or the Fill Color button, the Netscape 216 palette displays. These are the recommended colors for Web page design.

Choose a color by clicking on the color in the palette. You can move between adjacent colors using the arrow keys on your keyboard.

Move the color palette away from your design by clicking and dragging. Close the color palette by clicking outside of the palette.

NOTE: For shadowed text, the Fill Color button adjusts the base color and the Outline Color button adjusts the shadow color.


Drawing Lines

1.	Click the Lines button in the toolbar.

2.	Click and drag to draw a line.

If you drag upwards or downwards, you draw a vertical line:

If you drag to the left or right, you draw a horizontal line:

To select a line to resize or move it, click anywhere along its length. You can move it by clicking the middle of it and dragging it to the new position. You can make it longer or shorter by clicking one of the handles at either end and dragging it to the length you want, or by using the Size button.

See:

Formatting the Line


Formatting the Line

When you select a line, additional tools display above the design area so you can change the line’s thickness and color.

Attribute	Description
Line thickness	Changes the line thickness.
Color	Opens a palette of colors for the line.


Overview of Using Images

Use the images included with Creative Animator, or images created with other programs to design a personalized graphic. Any image can be resized and arranged with other objects using the tools in Creative Animator.

Creative Animator works with the following image formats:

• BMP	• PCX
• DCX	• PNG
• DIB	• RLE
• EPS	• TGA
• FMF	• TIF
• GIF	• WMF
• IMG	• WPG
• JPG
See:

Inserting an Image

Inserting an Animated Graphic Into a Banner

Rotating an Image


Inserting an Image

Creative Animator makes it easy to place an image on your graphic.

1.	Click the Images button to open the Load Image dialog.

The current directory displays on the right; its contents are displayed on the left. Change directories by clicking on the appropriate directory in the Directories box.

NOTE: If you installed the images that are included with the program, they are located in the Images directory.

2.	Select the file you want by clicking on its name.

When you select an image, a small representation of it displays in the Preview box.

To view thumbnails of all the images in the directory, click the Auto Play button (one thumbnail appears approximately every second). To end the Auto Play, click Stop.

If the image you’re viewing is on a CD, click the Copy to Program Directory button to copy the image to your Program Directory. This enables Creative Animator to re-create your graphic if you do not have the CD in the drive.

3.	After selecting an image, click OK to return to the Design window.

4.	Position the cursor on the graphic where you want to place the image, and the click to place it.

When you insert an image using the Load Image dialog, Creative Animator remembers where the image is saved and loads it from that location whenever you open the graphic file. This saves disk space, but if the image file is moved or deleted, it will not be available to the graphic file. If you paste an image from the Windows Clipboard, a copy of the image is saved with the graphic.


Inserting an Animated Graphic Into a Banner

You can create a banner using the Creative Animator tools and then insert an animated graphic (.gif file) into your banner. Place an animated GIF into your design using the Images button in the toolbar. Mark the Generate Animation check box in the Save As dialog when you save your banner.

Use the Animate GIF buttons to display the animation. Move forward or backwards through each frame of the animated GIF.

If you decide not to animate the GIF, clear the Generate Animation check box in the Save As dialog. The GIF image that displays in the Creative Animator design window will be the only frame displayed in the banner.


Rotating an Image

Most images can be rotated in increments of 90º. GIF and WMF images cannot be rotated.

1.	Select the image you want to rotate.

2.	Open the Format menu and choose Rotate 90° or click the Rotate 90° button.


Saving Your Graphic

As you work, your graphic is temporarily stored in the computer’s memory. We strongly suggest saving your graphic every ten minutes. That way, if there is a power failure or computer problem, you will never lose more than ten minutes of your work.

When you save your graphic, you are saving a banner file. This banner file can be used to create an animated graphic or as a banner on your web page. When you create an animated graphic you always have this banner file as a backup file.

Creative Animator provides a file report when you save your graphic. Open the View menu and choose Stats on Save to display information about download time, file size, and file type. This report displays when you save your graphic.

To save your graphic:

1.	Open the File menu and choose Save, or click the Save button in the toolbar.

If you have not saved the design before, this opens the Save As dialog so you can name your file and select a location to store it.

2.	Choose the drive and directory where you want to save the graphic.

3.	Type a name for the file.

4.	Click OK to save the file.

See also:

Saving Your Animated Graphic File


Overview of Creating an Animated Graphic

Using Creative Animator you can create an animated graphic for your web page. You can add shapes, text, and images to the graphic with Creative Animator tools.

See:

Using Shapes for Your Graphic

Adding Text to Your Graphic

Adding Lines to Your Graphic

Using Images on Your Graphic

Using Animated Graphics on Your Graphic


Using Shapes for Your Graphic

You can draw shapes such as rectangles, circles, or ellipses to design the foundation of your graphic.

See:

Drawing Shapes


Adding Text to Your Graphic

Click the Text button to enter the text that you want to display on your graphic.

See:

Adding Text to Your Graphic


Adding Lines to Your Graphic

You can draw lines in your graphic using the Creative Animator Lines button.

See:

Drawing Lines


Using Images on Your Graphics

The images in the Creative Animator’s Images file are perfect for using as a background for your graphic. You can also place other image files in your graphic.

See:

Placing an Image on Your Graphic


Using Animated Graphics on a Banner

You can create animated graphics using Creative Animator and then place the animated graphic on a banner. You can also place animated graphics from other programs on a banner.

See:

Inserting an Animated Graphic Into a Banner


Saving Your Graphic

1.	Open the File menu and choose Save As, or click the Save button in the toolbar. If you have not saved the design before, this opens the Save As dialog so you can name your file and select a location to store it.

2.	Choose the drive and directory where you want to save the graphic.

3.	Type a name for the file.

4.	Click OK to save the file.

When you save your graphic, two files are created and saved in the location you specified:

•	A Creative Animator file that you open whenever you need to edit the graphic.

•	An image that is automatically saved in GIF format. Insert this file into your Web page. You can also save your graphic as a JPEG or bitmap image if needed.

To save your work the next time, open the File menu and choose Save, or click the Save button in the toolbar. This saves any changes that have been made since the graphic was last saved.

See also:

Opening an Existing Graphic


Creating an Animated Graphic

An animated graphic is a single gif file that contains a series of at least two images. Each image is a modification of the previous one in the series.

Using Creative Animator you can create an image, duplicate it, and then modify each one. You then save this group of images together as one file. You can insert this file into your web page using a web page editor.

When you insert the animated gif file into your web program, the browser displays each image in the file, one after the other, something like a page-flipping animation booklet.

This chapter describes how to duplicate an image and save it as a single gif file. You can then open the file in your browser window to display it as an animated gif.

See:

Duplicating Your Graphic

Editing Your Graphics

Saving Your Animated Graphic File

Viewing Your Animated Graphic

Inserting Your Animated Graphic Into a Web Page


Duplicating a Graphic

To duplicate a graphic, first open it in the design window.

Open the File menu and choose Open to display the Open dialog. Choose the image file that you want to duplicate and click OK to display the graphic in the Design window.

See:

Duplicating a Graphic


Duplicating a Animated Graphic
Duplicating an Animated Graphic

Duplicate the graphic, up to 47 times, to create the images for your animated graphic.

1.	Click on the graphic to select it.

2.	Open the Edit menu and choose Duplicate Across.

A copy displays next to the original graphic. Continue to duplicate the graphic until you have the number of images that you want to use for your animated graphic.


Duplicating an Object

1.	Select the object.

2.	Open the Edit menu to duplicate objects across, down, and as a mirror image of the original object.

•	Choose Duplicate Across to create a duplicate of the object to the right of the original object.

•	Choose Duplicate Down to create a duplicate of the object below the original object.

•	Choose Duplicate/Flip to create a duplicate of gradient fill objects.

See:

Duplicating Your Graphic


Editing a Graphic

After you have duplicated your graphic to create the images for the animated graphic, you can select the individual images and edit each one. When you insert the animated graphic into an HTML program, the browser displays each image one after the other in the window.

See also:

Editing Your Graphic


Saving an Animated Graphic File

1.	Open the File menu and choose Save As Frames.

2.	Double click the Frame Rate box and type the frame rate value that you want to use.

NOTE: You can experiment saving your animated graphic at different frame rate values and then viewing it in your browser.

3.	Choose the drive and directory where you want to save the animated graphic.

4.	Type a name for the file.

5.	Click OK to close the Save As Frames dialog.


Viewing an Animated Graphic

View your animated graphic in the Creative Animator design window with the Animate GIF buttons. Select the animated graphic with the Images button then click the Animate GIF buttons to cycle through the different frames.

You can view your animated graphic file in your web browser.

1.	Open your browser.

2.	Choose Open from the File menu and select the animated graphic file.

NOTE: If your animated graphic file does not open in your browser,  insert the file into an HTML page and open the program file in your browser.


Inserting an Animated Graphic Into a Web Page

When you save your animated graphic, a transparent gif image is saved in the same folder as the frame files. This gif file has the same name as the frame file but with a gif file extension. For example, if you saved your animated graphic as logo.ban, then the GIF image file will be logo.gif.

The method for inserting this image into your Web page depends on the Web page editor that your are using.

For more information, refer to the documentation for your Web page editor.


Overview of Editing Your Graphic

Your graphic may include a series of objects. These objects can be lines, images, shapes, and text.

Once you have created some objects in your graphic, you can use the Select button to select, move, resize, and align them.

The first step in editing an object is selecting it.

See:

Editing Objects

Modifying Objects

Fine-Tuning Your Graphic


Editing Objects

Using the Creative Animator tools you can select an object and then move, resize, and align it. You can copy objects to other programs or to other graphics you create.

See:

Selecting One Object

Selecting Two or More Objects

Moving Objects

Moving Objects One Pixel at a Time

Resizing Images and Shapes

Resizing Images or Shapes One Pixel at a Time

Resizing Lines

Resizing Lines One Pixel at a Time

Removing, Replacing, and Copying Objects


Selecting One Object

To select one object, click on it to display the resizing handles. Once an object is selected, you can move it by clicking and dragging on the inside of the object, or you can resize it by clicking and dragging one of the resizing handles.

If the objects that you want to select are on top of each other, and you have selected the wrong object, you can select the next object in the layered stack by opening the Edit menu and choosing Select Previous or Select Next.

See:

Layering Objects on Your Graphic


Selecting Two or More Objects

Select several objects by holding the CTRL key down while clicking on each object individually.

You can also select a group of objects with the Select button by clicking on the white space outside of the graphic, and then dragging the mouse while holding the mouse button down. As you drag, a dotted selection box is drawn. Any objects inside this box are selected when you release the mouse button.

Select all of the objects on the graphic by opening the Edit menu and choosing Select All.

To cancel the current selection, click in the white space outside of the graphic area.


Moving Objects

Once you have selected an object, you can move it by clicking and dragging it to the new position. The cursor changes to a hand when you select an object to move it.

NOTE: If the object will not move, open the Format menu and choose Lock Mouse Movement to turn the feature off.


Moving Objects One Pixel at a Time

You can use the Position button to move objects one pixel at a time. To do this:

Select the object or objects. You can select multiple objects by holding down the CTRL key and clicking on each object, or by surrounding several objects with the Select button.

After selecting the object or objects, click one of the arrows in the Position button. Each click moves the object by one pixel in the direction clicked.

You can also press the arrow keys on the keyboard to move the selected objects by one pixel in the arrow key’s direction.

See:

Selecting Two or More Objects


Resizing Images and Shapes

Click an object to select it. Resizing handles appear around the object. Click and drag a handle to change the size of the object.

To resize the image proportionally, drag the handles on the corners. When you use this technique, the aspect ratio is maintained so that the image will not be distorted.

If you want to change the proportions of the image, hold the SHIFT key down when you resize the image. Your image will be resized to the size and shape that you specify.

If you accidentally distort an image, you can return it to its original size and shape by clicking the Return to Original Size button.


Resizing Images or Shapes One Pixel at a Time

You can use the Size button to resize images and shapes one pixel at a time.

1.	Select the image or shape.

2.	Click one of the arrows in the Size button.

3.	Click the up or down arrows to change the object’s size.

Each click changes the size of the image or shape by one pixel in the direction clicked.

You can also hold down the SHIFT key and press the arrow keys on your keyboard to change the size of the selected object by one pixel in the arrow key’s direction. Hold the arrow keys down to continuously resize the image or shape.


Resizing Lines

Click the line to select it. Resizing handles appear at the ends of the line. Click and drag a handle to change the length of the line.


Resizing Lines One Pixel at a Time

You can use the Size button to resize lines one pixel at a time.

1.	Select the line.

2.	Click the left and right arrows in the Size button.

Each click changes the length of the line by one pixel in the direction clicked.

3.	Click the up or down arrows to change the line’s thickness.

You can also hold down the SHIFT key and press the left or right arrow keys on the keyboard to change the length of the selected line by one pixel in the arrow key’s direction. Hold the arrow keys down to continuously change the length of the line.


Removing, Replacing, and Copying Objects

If you want to…	Then do this…
Cut an object from the graphic.	Select the object you want to cut, then open the Edit menu and choose Cut (or click the Cut button in the toolbar).
Delete an object from the graphic.	Select the object you want to delete, then open the Edit menu and choose Delete.
Copy an item.	Select the object you want to copy, then open the Edit menu and choose Copy (or click the Copy button in the toolbar).
Place an object that was Cut or Copied.	Open the Edit menu and choose Paste (or click the Paste button in the toolbar).
Copy a selected object and paste it on the graphic automatically.	Select the object you want to duplicate, then open the Edit menu and choose one of the three Duplicate options.
Select all of the objects on the graphic so they can be changed or moved.	Open the Edit menu and choose Select All.


Modifying Objects

You can use the Creative Animator tools to modify the colors and the formatting of your images.

See:

Changing Images to Two-Color Mode

Experimenting with Color Effects for GIFS

Formatting Images

GIF Formatting Options

Formatting Options for BMP, DIB, PCX, IMG, JPG, RLE, TIF, DCX, PNG, WPG, TGA, or EPS Images


Changing Images to Two-Color Mode

Creative Animator can quickly reduce a GIF image to only two colors-a dark color and a light color.

1.	Select the image that you want to convert to two-color mode.

2.	Click the Two-Color Mode button in the toolbar to open the Two-Color Mode dialog.

3.	Choose the colors for the image by clicking the Color buttons, then choose from the color palette that displays.

4.	Control the proportions of the colors in the image by increasing or decreasing the number in the Threshold box. The number must be between 1 and 4.

•	Higher threshold numbers increase the amount of the dark color in the image.

•	Lower threshold numbers increase the amount of the light color in the image.


Experimenting with Color Effects for GIFS

The colors in any GIF image can be changed to produce 27 different color effects. Each effect rearranges the Red, Green, and Blue (RGB) values of each pixel without changing its intensity.

To apply a color effect:

1.	Select the GIF that you want to edit.

2.	Click the Color Effect button to open the Color Effects dialog.

3.	Choose an effect by increasing or decreasing the number in the Effect # box.

4.	Click OK to return to the design window.


Formatting Images

You can modify the attributes of images in several ways. Different toolbars display depending on the format of the selected image.

If a gif is selected, the following toolbar displays:

If a BMP, PCX, JPG, TIF, DCX, PNG, TGA, DIB, IMG, RLE, WPG, or EPS image is selected, the following toolbar displays:


GIF Formatting Options

Attribute	Description
Return to Original Size	Restores the image to its original dimensions, no matter how you’ve changed its shape.
Image Color Palette	Switches colors in a GIF image. Works best on images with few colors. Double-click a color in the Image Color Palette and the Netscape 216 palette appears. Select a color in the 216 palette to replace the color in the Image Color Palette. Within the Image Color Palette, you also can drag one color to another to replace it. Colors appear in the palette based on how frequently they occur in the image.
Emboss (Raised and Lowered)         Raised          Lowered	For best results, place the image on a background (the more solid the background color, the better). Experiment with the background color for the results you want.
Dark Outline	Outlines the image in a darker color. Place the image on a background (the more solid the background color, the better). Experiment with background colors to display the best image outline.
Light Outline	Outlines the image in a lighter color. Place the image on dark a background (the more solid the background color, the better). Experiment with background colors to display the best image outline.
Two-Color Mode	This feature reduces an image to only two colors. Any color that is darker than a defined threshold is made into one color and the rest of the colors will be made into the second color.
Color Effect	The colors in any GIF image can be changed to produce 27 different color effects. Each effect rearranges the red/green/blue values of each pixel without changing its intensity.
Lighten/Darken Image         Lighten           Darken	Lightens or darkens one or more selected images with each successive click.
Animate GIF     Forward    Backward	(Animated GIFs only) Moves forward or backward through the sequence of the animated GIF.


Formatting Options for BMP, DIB, PCX, IMG, JPG, RLE, TIF, DCX, PNG, WPG, TGA, or EPS Images

Attribute	Description
Rotate 180°	Rotates the image 180 degrees.
Flip	Reverses image vertically.
Convert to Grayscale	Changes image from color to grayscale.
Return to Original Size	Restores the image to its original dimensions, no matter how you’ve changed its shape.
Two-Color Mode	Reduces an image to only two colors. Any color that is darker than a defined threshold is made into one color and the rest of the colors will be made into the second color.
Lighten/Darken Image        Lighten           Darken	Lightens or darkens one or more selected images with each click.
Rotate 90°	Rotates the image in 90° increments with each click—0, 90, 180, or 270.


Fine-Tuning Your Graphic

Creative Animator includes several useful precision alignment tools. The Position and Size buttons allow you to move and resize objects one pixel at a time. The Align button allows you to position objects in relation to each other. Use the Grid and Rulers to precisely position all of the objects on your graphic.

See:

Using the Position and Size Buttons

Changing the Position of Several Objects

Changing the Size of Several Objects

Aligning Objects with Each Other

Using the Grid

Using the Rulers

Layering Objects on Your Graphic

Preventing Movement of Objects


Using the Position and Size Buttons

Creative Animator contains two tools, one that changes the position of an object one pixel at a time, and another that changes the size of an object one pixel at a time. When you use these tools, the position and size of your object is displayed in the Status Bar at the bottom of the Creative Animator window.


Changing the Position of Several Objects

You can change the position of a group of objects by one pixel at a time.

1.	Select the objects you want to position.

2. 	Click one of the arrows in the Position button.

Each time you click the arrow, the objects are moved one pixel in that direction.


Changing the Size of Several Objects

You can change the size of a group of objects by one pixel at a time.

1.	Select the objects you want to resize.

2.	Click one of the arrows in the Size button.

Each time you click the arrow, the objects are resized one pixel in that direction.


Aligning Objects with Each Other

Use the Align button to position the objects in the design area in relation to each other. You can align text, shapes, lines, and images to neatly organize them.

1.	Click the Select button to make sure no objects are selected.

2.	Hold down the CTRL key while clicking with the mouse or use the Select button to select the group of objects you want to align.

3.	Click the Align button.

4.	Choose your alignment options. (If some of the options are dimmed, only one object is selected.)

Objects are aligned relative to the other objects.

The object the alignment is based on depends on which option you choose. For example, if you choose the Right Sides option, then the right sides of the selected objects are aligned with the right side of the right-most object.

•	If you select the Widths or Heights option, all of the selected objects will have the same width or height.

•	If you select Touch Horizontally or Touch Vertically, all of the selected objects will touch each other.

5.	Click OK to save the settings and align the selected objects.


Using the Grid

The grid can help you position objects on your graphic. The grid will not appear in your graphic; it is there only as a guide.

1.	Open the View menu and choose Grid.

2.	Choose a style from the Grid Style drop-down list:

•	No Grid turns the grid off.

•	Invisible Grid turns on an invisible grid when the Snap to Grid check box is marked.

•	Grid Lines displays grid lines on the graphic.

•	Grid Dots displays a dot at the corner of each grid box on the design.

3.	Mark the Snap to Grid check box if needed. When this option is turned on, the top and left sides of the object are moved to the nearest grid lines.

4.	Set the size of each grid box using the Height and Width boxes.

5.	Click OK to accept the settings.


Using the Rulers

The rulers along the edges of the Creative Animator window are marked in pixels. They show how your graphic will display when using various screen resolutions. The different colors on the rulers indicate the standard resolutions. To turn these rulers on or off, open the View menu and choose Rulers.


Layering Objects on Your Graphic

As you place objects on your graphic, Creative Animator assigns each object to a "layer" in the design. Objects can overlap, or be overlapped by other objects. You can easily change the layer of an object to control the design.

1.	Select an object by clicking it.

2.	Open the Format menu and choose an option:

•	Bring Forward: Choose this to move the selected object one level closer to the top layer on the screen. You can also click the Front button in the toolbar.

•	Bring to Top: Choose this to place the selected object on top of all of the other objects on the graphic.

•	Send Back: Choose this to move the selected object one level away from the top layer on the screen. You can also use the Back button in the toolbar.

•	Send to Bottom: Choose this to move the selected object behind all the other objects on the graphic.

If you have objects on top of each other and you have selected the wrong object, you can select the next object in the layered stack by opening the Edit menu and choosing Select Previous or Select Next.


Preventing Movement of Objects

Creative Animator allows you to lock the movement of objects so that their position never changes accidentally.

To prevent any movement in the graphic design, open the Format menu and choose Lock All Movement.

To only prevent the movement if you are using your mouse, open the Format menu and choose Lock Mouse Movement. In this mode you can still use the Position and Size buttons in the toolbar to move objects one pixel at a time.


Managing Your Graphic Files

With Creative Animator you can easily manage your graphic files. You can transfer your files to another computer, insert the graphic into your Web pages, and make copies of your graphic files.

See:

Opening an Existing Graphic

Copying a File

Transferring Files to Another Computer

Inserting Your Animated Graphic Into a Web Page

Exiting Creative Animator

Removing Creative Animator from Your Computer


Opening an Existing Graphic

1.	Open the File menu and choose Open (or click the Open button) to display the Open dialog.

If you have not saved the current graphic, you are asked to do so.

2.	Use the Folders and Drives boxes to locate the drive and folder where the file is stored.

3.	Click the file name in the File name box.

4.	Click OK.

Creative Animator also keeps track of the last four files you opened. These files are listed at the bottom of the File menu. Open one of these files by choosing it from the menu.


Copying a File

The way you make a copy of a file depends on the type of graphic.

•	Open the File menu and choose Save As for graphic files.

•	Open the File menu and choose Save As Frame for animated graphic files.

In the Save As dialog, rename the file. This makes a copy of the current file under a new name.

The new file will be on the screen after the program is finished saving. Any changes you have made since the last save will not be saved to the old file; these changes are only saved in the new file.


Transferring Files to Another Computer

Your graphic is defined by two files.

•	Open the BAN file to edit the graphic design.

•	The file with the .GIF extension is the gif image that you will insert into your Web page.

When transferring files to another computer, it is only necessary to transfer the .BAN file since the .GIF file can always be recreated from the .BAN file.

If you transfer your files to another computer, you also need to transfer any image files that you used in your design. These images are not stored as part of the .BAN file. When you use the Images button, Creative Animator keeps track of the location of the image on your computer, and retrieves the image when you open the banner file.


Inserting Your Animated Graphic Into a Web Page

When you save your graphic, a transparent gif image is saved in the same folder as the Creative Animator files, with the same name as the Creative Animator files but with a different extension. For example, if you saved your graphic as logo.ban, then the gif image file will be logo.gif. The size of the gif image will be the minimum size that contains all the objects in your graphic.

If you want the image to display more quickly on your Web page when someone views it with their Internet browser, mark the Interlaced Image check box in the Save As dialog.

The method for inserting this image into your Web page depends on the Web page editor that you are using. For more information, refer to the documentation for your Web page editor.


Exiting Creative Animator

1.	Open the File menu and choose Exit.

Creative Animator asks if you want to save any changes you have made to the graphic file.

2.	Click Yes if you want to save the changes or No if you do not want to save the changes. If you decide not to quit Creative Animator, click Cancel.


Removing Creative Animator from Your Computer

To uninstall Creative Animator:

1.	Close Creative Animator by opening the File menu and choosing Exit.

2.	Open the Windows Start menu and choose Settings > Control Panel to open the Windows Control Panel.

3.	Double-click the Add/Remove Programs icon to open the Add/ Remove Programs dialog.

4.	Choose Creative Animator from the list at the bottom of the dialog.

5.	Click the Add/Remove button.

6.	Follow the on-screen instructions to finish uninstalling Creative Animator.


Helpful Hints and Troubleshooting

See:

Using the Netscape/Microsoft 215 Color Palette

Getting the Most From the Color Palette

If Your Embossed Text Doesn't Look Right...

If Your Graphic Won't Display on Your Web Page...

If the Image Colors Do Not Look Right...

Changing the Final Graphic Size

Troubleshooting Transparency Issues

Transparency in High Color (16 bit) Mode

If Elements Disappear...

If the Rotate Image Button is Dimmed...

If There is a Power Loss Before You Save the Graphic...


Using the Netscape/Microsoft 215 Color Palette

The standard Windows color scheme includes 20 real colors. Additional colors are created by mixing pixels of these colors together. This mixing of pixels is called dithering.

Netscape and Microsoft collaborated to create a palette of 216 predefined colors that will display correctly on most Web browsers when in a 256-color video mode. Using this palette of 216 colors, practically any real image can be simulated accurately.

Netscape and Microsoft recommend that you use only these 216 colors to ensure that your Web page displays properly for people visiting your site. Creative Animator uses this standard palette of 216 colors for text, lines, and shapes. If you use other programs to design Web objects, be sure that they also use them.


Getting the Most From the Color Palette

Creative Animator allows you to easily experiment with text, line, and image colors. To see how a selected object appears with a color, click that color on the palette. Immediately, the color of the selected object changes to the color you have chosen. You can either use the mouse to select another color or you can use the arrow keys to quickly move to adjacent colors on the palette.

To move the palette to different locations in the Creative Animator design area, click and hold down the left mouse button, and then drag the palette around the work area. Release the mouse button to lock the palette into its new location.


If Your Embossed Text Doesn't Look Right...

Embossed text works well on some backgrounds (for example, dark backgrounds), but not on others (for example, light backgrounds). To improve the looks of embossed text, try different colors on the text or use a darker image behind it.


If Your Graphic Won't Display on Your Web Page...

The default image format Creative Animator uses when saving a graphic design is GIF. In the Save As dialog you also have the option to save your graphic as a BMP or a JPG image. JPG images are supported by Web browsers, but not BMP images. If you've saved your graphic in the BMP format, you'll have to convert it to either GIF or JPG before it displays properly in your Web page.


If the Image Colors Do Not Look Right...

If your computer is set to a 256-color display, whenever you place an image on your graphic, the color palette is set to support the colors in the image. If you place more than one image on your graphic, and if they use different color palettes, they may together exceed the number of colors that your computer can support. The last image that you place will have the correct colors, and any images previously placed may have their colors changed based on the color palette of the last image that you placed.

If you need to place multiple images into your graphic, these images must be created with the same color palette, or your computer must be set up for more than 256 colors.

(In Windows 95/98, right-click on the desktop and select Properties, and then click Settings and choose a color set of more than 256 colors.)


Changing the Final Graphic Size

The standard size of the graphic image is set to be just large enough to contain all the elements included in the graphic. Occasionally you may want your graphic to be surrounded with a blank transparent space so that the image is separated from the contents of the rest of your Web page.

To do this, create a large rectangle that is the desired size of the graphic and fill it with white color.

NOTE: For animated graphics, you need to create the size before you duplicate the graphic to make each image the same size.

Because this rectangle is white, it will be transparent in the final image (click the Set Color button in the Save As dialog to change the transparency color). Since Creative Animator makes an image that is just large enough to contain all the elements in the graphic, the white rectangle will be included in this calculation.

If you create the white shape after you have created the rest of your graphic, you will have to select it and then open the Format menu and choose Send to Bottom to place this rectangle behind the rest of your design.)


Troubleshooting Transparency Issues

Creative Animator uses white as the default transparency color when making the final GIF image. Anything in your graphic that is white will be transparent, including hollow framed rectangles and images that contain white.

Click the Set Color button in the Save As dialog to change the transparency color.

If you do not want a framed rectangle to be transparent when displayed in a browser, you must fill it with some color or, mark the Transparent Image check box in the Save As dialog.


Transparency in High Color (16 bit) Mode

If your screen is set to the High Color (16 bit) mode (right-click on the Windows desktop, choose Properties, and then click the Settings tab), some computers have a problem creating transparency because the white color used for transparency is actually mapped to a slightly off-white color. On these computers, white filled rectangles will not be transparent, so the background will show through when viewed with a browser.

If you must work in High Color mode, you may not get transparency in your image. If you need transparency, to ensure white colors are transparent, change your color setting to 256 colors. Or choose another color for transparency by clicking the Set Color button in the Save As dialog.


If Elements Disappear...

Creative Animator uses a layering approach to elements, so one element can be on top of another element. This can result in an element disappearing if you place a larger element on top of it. To solve this problem, select the element that is hiding the element that you want to see, then open the Format menu and choose Send to Bottom. This will send the element that is covering your element to the bottom of the stack and you will then be able to see the element that was hidden.


If the Rotate Image Button is Dimmed...

Creative Animator allows you to rotate most types of images. However, Encapsulated PostScript (.EPS) and Windows Metafile (.WMF) images cannot be rotated.

To determine what type of image you are using, locate the image file using Windows Explorer. If the extension is .EPS or .WMF, the image cannot be rotated. The image can still be used in the graphic in its normal orientation.


If There is a Power Loss Before You Save the Graphic...

Creative Animator keeps temporary copies of your work on your hard disk. If you have a power loss or some unforeseen accident which causes Windows or Creative Animator to cease running before you have saved your data, do not panic. Most of your work will still exist in the temporary files which you can find in your Windows directory. Simply rename the temporary files as follows:

Rename ~MY00000.BAN to YOURFILE.BAN

Where YOURFILE is the name of the name of the file you were using before.


Glossary of Terms

To view a definition, click on a term below.

BMP

Click and Drag

Clipboard

GIF

Image

JPEG

Object

Pixel


BMP

The Bitmap format is a method for displaying images on a computer screen. The image is represented by a collection of little squares called pixels. Bitmap images are usually created using a paint or photo-editing program, and cannot be displayed on the World Wide Web. To use a BMP image on your Web page, you must save it in GIF or JPEG format.


Click and Drag

Click and drag is a technique used to move objects. Position the cursor over the object, and then click and hold down the left mouse button. Move the cursor to a new position and then release the mouse button.


Clipboard

The Windows Clipboard is a temporary storage area for cut or copied objects. Objects in the Clipboard can be pasted into a graphic or into other programs.


GIF

GIF (Graphics Interchange Format) is a file format commonly used for graphics that are displayed in Web pages.


Image

An image is a picture or graphic brought into your graphic from an external program. Creative Animator recognizes files in BMP, DCX, DIB, EPS, FMF, GIF, IMG, JPG, PCX, PNG, RLE, TGA, TIF, WMF, and WPG formats.


JPEG

JPEG (Joint Photographic Experts Group) is an image format that is supported by many Web browsers. It was developed to compress and store photographs.


Object

An animated graphic is made up of a series of objects. An object is an item you can move, resize, add, or remove from a graphic. Each object can be edited separately, or they can be gathered into groups. These objects include text, images, shapes, and lines.


Pixel

A pixel is the basic unit of a computer graphic image. Each dot that makes up the image is one pixel. Typical computer screens are 640 or 800 pixels wide and 480 or 600 pixels high.


Legal Notices

License Agreement

Copyright Notices


License Agreement

If you keep the Software, you are agreeing to the terms of this Agreement. Use of the Software is subject to this agreement. If you do not agree to the terms of this Agreement, return this package to Elibrium or the location where you obtained it, for a refund.

Elibrium grants you a non-exclusive right to use this copy of the Software and accompanying materials according to the following:

You May

a)	use and install the Software on only one computer at a time;

b)	make one (1) copy of the Software for backup purposes; and

c)	transfer the Software from one computer to another so long as the Software is neither used on nor copied onto more than one computer at a time (except for the same user's business and home computer).

You May Not

a)	modify, reverse engineer, or copy (except for the backup copy of the Software or accompanying materials); or

b)	rent or transfer the Software.

This license is not a sale. Title and Copyrights to the Software and accompanying materials remains with Elibrium and its licensors. Any breach terminates this Agreement.

More:

Limited Warranty, Disclaimer, and Limit of Liability

U.S. Government Restricted Rights


Limited Warranty, Disclaimer, and Limit of Liability

If at any time the Software fails to operate as described in the documentation, simply return the original disks to Elibrium, and Elibrium will replace the software at no charge to you or refund the purchase price, at Elibrium’s option. Elibrium and its licensors do not warrant your data, that the Software will meet your requirements, or that the operation will be uninterrupted or error free.

THE WARRANTY ABOVE IS IN LIEU OF ALL OTHERS, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. SOME STATES HAVE LAWS THAT MAY RESTRICT OR PROHIBIT THE LIMITATIONS SET FORTH ABOVE AND YOUR RIGHTS UNDER LAW MAY VARY ACCORDING TO THE LAWS OF YOUR STATE.

Elibrium and its licensors shall not be liable for any incidental or consequential damages, including loss of data, lost profits, cost of cover, or other special or indirect damages. Your rights under law may vary.

More:

License Agreement

U.S. Government Restricted Rights


U.S. Government Restricted Rights

The software and documentation are provided with Restricted Rights. Use, duplication, or disclosure to the Government is subject to restrictions, as set forth in subparagraph (c)(1)(ii) of the Rights in Technical Data and Computer Software clause at DFARS 252.227-7013 or subparagraphs (c)(1) and (2) of the Commercial Computer Software - Restricted Rights at 48 CFR 52.227-19, as applicable. Manufacturer is Elibrium, 2197 East Bayshore Road, Palo Alto, CA 94303-3219.

This license agreement and limited warranty will be governed by the laws of the state of California. If any provision is found void or unenforceable, the remainder of the agreement shall remain valid and enforceable.

More:

License Agreement

Limited Warranty, Disclaimer, and Limit of Liability


Copyright Notices

Creative Animator

Copyright © 2001 Elibrium.

Creative Animator, ProVenture, and MySoftware are trademarks of Elibrium. All other trademarks are the property of their respective companies.

The information in this document is subject to change without notice. Companies, names, and data used in examples herein are fictitious unless otherwise noted. No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Elibrium.

Documentation by M. Wolf, D. Leatherman, S. Fleming, and D. Paterson.